<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>原生 html 中使用 vue</title>

    <style>
        body {
            height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        #app {
            max-width: 300px;
            display: flex;
            margin: 0 auto;
            padding: 2rem 5rem;
            font-size: 2rem;
            font-weight: normal;
            background-color: #58af5c;
            border-radius: 5px;
            text-align: center;
            color: rgb(212, 255, 241);
        }
    </style>
</head>

<body>
    <!-- 文本插值 -->
    <p id="app">{{message}}</p>

    <!-- 导入 Vue3 库 -->
    <script src="./src/assets/vue.global.js"></script>

    <!-- 选项式 -->
    <!-- <script>
        // 创建应用
        const { createApp } = Vue;

        // 挂载应用
        createApp({
            data() {
                return {
                    // 初始值为空
                    message: "你好，世界！",
                };
            }
        }).mount("#app");
    </script> -->

    <!-- 组合式 -->
    <script>
        // 创建应用
        const { createApp } = Vue;

        // 引入 Ref API
        const { ref } = Vue;

        // 挂载应用
        createApp({
            setup() {
                // 显示内容
                let message = ref("你好，世界！")
                
                // 返回内容
                return {
                    message
                }
            }
        }).mount("#app");
    </script>
</body>

</html>